﻿<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <title>柱状图</title>
          <!-- 引入 echarts.js -->
          <script src="./echarts.js"></script>
          <script src="./qwebchannel.js"></script>
     </head>
     <body>
          <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
          <div id="main" style="width: 600px;height:400px;"></div>
          <div id="test" style="width: 600px;height:200px;"></div>
          <script type="text/javascript">
          // 基于准备好的dom，初始化echarts实例
          var myChart = echarts.init(document.getElementById('main'));
          var option = {
              title: {
                   text: '柱状图示例'
              },
              tooltip: {},
              legend: {
                   data: ['销量']
              },
              xAxis: {
                   data: ["1","2","3","4","5"]
              },
              yAxis: {},
              series: [{
                   name: '销量',
                   type: 'bar',
                   data: ["1.9","2.2","3","4","3.4"]
              }]
          }
          // 指定图表的配置项和数据
          myChart.setOption(option);
          var context;
          function init() {
            if(typeof qt != 'undefinded') {
                new QWebChannel(qt.webChannelTransport, function(channel) {
                    context = channel.objects.context;
                    var test = document.getElementById('test');
                    test.innerHTML = context.content;
                });
            }
            else {
                var test = document.getElementById('test');
                test.innerHTML = 'js';
            }
          }
          // 向Qt发送消息
          function sendMessage(msg) {
            if(typeof context != 'undefinded') {
                context.RecvJSMsg(msg);
            }
            else {
                alert("context undefinded");
            }
          }
          function recvMessage(msg) {
              var test = document.getElementById('test');
              test.innerHTML = msg;
              //alert(msg);
              sendMessage("hello, this is js");
          }
          init();
          </script>
     </body>
</html>
